<template>
  <div>
    <h3>{{ $t("business.workload.toleration") }}</h3>
    <el-form v-if="yamlInfo.tolerations" label-position="top" :model="yamlInfo">
      <el-collapse v-model="activeNames">
        <el-collapse-item
          v-for="(item, index) in yamlInfo.spec.tolerations"
          :key="index"
          style="margin-top: 10px"
          :name="index"
        >
          <template v-slot:title>
            <div v-if="item.key" class="spanInFormStyle">
              <span :title="item.key">{{ item.key }}</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col v-if="item.key" :span="12">
              <el-form-item style="margin-left: 20px" label="key">
                <div class="spanInFormStyle">
                  <span :title="item.key">{{ item.key }}</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col v-if="item.operator" :span="12">
              <el-form-item style="margin-left: 20px" label="operator">
                <span>{{ item.operator }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="item.effect" :span="12">
              <el-form-item style="margin-left: 20px" label="effect">
                <span>{{ item.effect }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="item.tolerationSeconds" :span="12">
              <el-form-item
                style="margin-left: 20px"
                :label="$t('business.workload.toleration_seconds')"
              >
                <span>{{ item.tolerationSeconds }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <br />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const yamlInfo = defineModel<any>("yamlInfo");
const activeNames = ref(0);
</script>

<style scoped></style>
